<template>
	<view class="container" v-if="orderData">
		<view class="goods">
			<image :src="$img_base_url(orderData.image)" mode="aspectFill"></image>
			<view class="info">
				<view class="name one-row">
					{{orderData.title}}
				</view>
				<view class="text">
					{{orderData.difference}}
				</view>
			</view>
		</view>
		<view class="p-status">
			<view class="item" v-for="(item,i) in s_list" :key="i" @click="select=i">
				<image v-if="select==i" :src="$img_path(item.img_1)" mode="scaleToFill"></image>
				<image v-else :src="$img_path(item.img_2)" mode="scaleToFill"></image>
				<text>{{item.text}}</text>
			</view>
		</view>
		<view class="img-text">
			<view class="upload">
				<view class="img" v-for="(item,i) in c_img" :key="i">
					<image class="del" @click="del_index(i)" :src="$img_path('/home/needs/icon-input-close.png')" mode="scaleToFill"></image>
					<image :src="$img_base_url(item)" mode="aspectFill"></image>
				</view>
				<view class="up-box" :style="{width:c_img.length>0?'188rpx':'100%'}" @click="uploadImg">
					<image :src="$img_path('/pagesMine/16.png')" mode="widthFix"></image>
					<text>添加照片/视频</text>
				</view>
			</view>
			<view class="textarea-box">
				<textarea v-model="comment"></textarea>
			</view>
			<!-- <view class="nm-check">
				<view @click="isNiMing=!isNiMing">
					<image v-if="isNiMing" :src="$img_path('/pagesMine/14.png')" mode="widthFix"></image>
					<image v-else :src="$img_path('/pagesMine/15.png')" mode="widthFix"></image>
					<text>匿名评价</text>
				</view>
			</view> -->
		</view>
		
		<view class="btn">
			<button @click="commentOrder">提交</button>
		</view>
	</view>
</template>

<script>
	import { commentOrder } from '@/utils/api/mallApi.js'
	import { upload } from '@/utils/api/public.js'
	export default {
		data() {
			return {
				s_list:[
					{
						img_1:'/pagesMine/17.png',
						img_2:'/pagesMine/17_n.png',
						text:'非常差'
					},
					{
						img_1:'/pagesMine/18.png',
						img_2:'/pagesMine/18_n.png',
						text:'较差'
					},
					{
						img_1:'/pagesMine/19.png',
						img_2:'/pagesMine/19_n.png',
						text:'一般'
					},
					{
						img_1:'/pagesMine/20.png',
						img_2:'/pagesMine/20_n.png',
						text:'推荐'
					},
					{
						img_1:'/pagesMine/21.png',
						img_2:'/pagesMine/21_n.png',
						text:'超赞'
					},
				],
				select:4,
				isNiMing:false,
				
				order_id:null,
				shop_id:null,
				orderData:null,
				comment:'',
				c_img:[]
			};
		},
		onLoad(options) {
			console.log(options,7788)
			this.order_id = options.id 
			this.shop_id = options.shop_id
			this.orderData = JSON.parse(options.goods)
		},
		methods:{
			uploadImg(){
				uni.chooseMedia({
					count:1,
					mediaType:['image', 'video'],
					sourceType:['album', 'camera'],
					maxDuration:30,
					success:(res)=>{
						let file = res.tempFiles[0].tempFilePath
						upload({file}).then(res=>{
							// console.log(res,'-')
							this.c_img.push(res.data.url)
						})
					},
					fail:(err)=>{
						console.log(err,'-')
					}
				})
			},
			del_index(i){
				this.c_img.splice(i,1)
			},
			// 
			commentOrder(){
				let obj = {
					order_id:this.order_id,
					shop:{
						deliver:this.select+1,
						describe:this.select+1,
						logistics:this.select+1,
						service:this.select+1,
						id:this.shop_id
					},
					goodsList:[
						{
							comment:this.comment,
							difference:this.orderData.difference,
							goods_id:this.orderData.goods_id,
							image:this.orderData.image,
							title:this.orderData.title,
							imgList:this.c_img,
							state:this.select>=3 ? 0 : this.select>=1&&this.select<3 ? 1 : 2,
							id:this.orderData.id
						}
					]
				}
				uni.showLoading({})
				commentOrder(obj).then(res=>{
					uni.hideLoading()
					uni.showToast({
						title:'评价成功',
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:3
						})
					},1000)
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	padding: 0 22rpx;
	box-sizing: border-box;
	.goods{
		padding: 26rpx 28rpx 22rpx;
		display: flex;
		align-items: center;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(223,223,223,0.16);
		border-radius: 20rpx;
		margin-top: 20rpx;
		&>image{
			width: 120rpx;
			height: 120rpx;
		}
		.info{
			width: calc(100% - 120rpx);
			padding-left: 20rpx;
			box-sizing: border-box;
			.title{
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}
			.text{
				font-weight: 500;
				font-size: 24rpx;
				color: #9A9A9A;
				line-height: 34rpx;
				margin-top: 20rpx;
			}
		}
	}
	
	.p-status{
		padding: 34rpx 50rpx 0;
		display: flex;
		justify-content: space-between;
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			&>image{
				width: 78rpx;
				height: 78rpx;
			}
			text{
				font-weight: bold;
				font-size: 26rpx;
				color: #000000;
				line-height: 36rpx;
				margin-top: 8rpx;
			}
		}
	}
	
	.img-text{
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 16rpx 22rpx 48rpx;
		box-sizing: border-box;
		margin-top: 32rpx;
		.upload{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: left;
			&>view{
				&:not(:nth-child(3n)){
					margin-right: 40rpx;
				}
				&:last-child{
					margin-right: 0;
				}
			}
			&>view.img{
				width: 188rpx;
				height: 188rpx;
				image{
					width: 100%;
					height: 100%;
				}
				position: relative;
				.del{
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					top: 0;
					right: 0;
					transform: translateX(50%) translateY(-50%);
				}
			}
			.up-box{
				width: 100%;
				height: 188rpx;
				background: #F2F2F2;
				border-radius: 20rpx ;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				image{
					width: 60rpx;
					height: 54.7rpx;
				}
				text{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
					margin-top: 8rpx;
				}
			}
		}
		.textarea-box{
			width: 100%;
			height: 518rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #B4B4B4;
			padding: 20rpx 34rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			textarea{
				width: 100%;
				height: 100%;
			}
		}
		.nm-check{
			margin-top: 20rpx;
			&>view{
				display: inline-flex;
				align-items: center;
				image{
					width: 40rpx;
					height: 40rpx;
				}
				text{
					font-weight: 400;
					font-size: 28rpx;
					color: #1D1D1D;
					line-height: 40rpx;
					margin-left: 12rpx;
				}
			}
		}
	}
	.btn{
		margin-top: 36rpx;
		button{
			width: 706rpx;
			height: 96rpx;
			background: linear-gradient( 135deg, #FFA233 0%, #FB4C4C 100%);
			border-radius: 80rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
		}
	}
}
</style>
